<template>
    <div class="app-container">
        <el-form ref="environmentRef" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="20" :xs="24">
                    <el-form-item label="操作时间" prop="operatedate" style="width: 308px;">
                        <el-date-picker required v-model="queryParams.operatedate" type="datetime"
                            :rules="rules.timeRule"></el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="20" :xs="24">
                    <el-form-item label="" prop="misfirePolicy">
                        <el-radio-group v-model="queryParams.environmentNumber">
                            <el-radio :disabled="lock" v-for="(item, index) in environmentList" class="radio"
                                :label="item.environmentNumber" border>
                                {{ item.environmentName }}</el-radio>

                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">

                    <el-button style="float: right;  margin-left: 10px" type="primary" plain icon="Check"
                        @click="updateNumber">确认</el-button>
                    <el-button style="float: right;;" type="primary" plain icon="Lock"
                        @click="updateLock">解锁</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup name="Environment">
import { listEnvironment, editNumber } from "@/api/factoryInfo/environment/environment";
const { proxy } = getCurrentInstance();
import { ref } from 'vue';
const environmentList = ref([]);
const lock = ref(true);

const data = reactive({
    form: {},
    queryParams: {
        environmentNumber: '',
        operatedate: ''
    },
    rules: {
        operatedate: [{ required: true, message: "请选择操作时间", trigger: "blur" }]
    },
});
const { queryParams, form, rules } = toRefs(data);

function updateLock() {
    lock.value = false;
}

getList();
function getList() {
    listEnvironment({}).then(response => {
        environmentList.value = response.data;
        environmentList.value.forEach(e => {
            if (e.isRunning == 1) {
                queryParams.value.environmentNumber = e.environmentNumber;
            }
        })
    });
}

async function updateNumber() {

    proxy.$refs["environmentRef"].validate(valid => {
        if (valid) {

            proxy.$modal.confirm('是否要提交设置').then(function () {
                return editNumber(queryParams.value);
            }).then(() => {
                getList();
                proxy.$modal.msgSuccess("设置成功");
            }).catch(() => { });
        }
    });

}

</script>

<style lang='scss' scoped>
.radio {
    /* width: 100%;*/
    margin: 20px;
}
</style>